<template>
    <div>
      <el-table
        key="2"
        ref="table"
        style="width: 100%;margin-top:20px"
        :data="dataList"
        @selection-change="selectChange"
        border
        v-loading="dataListLoading">
                <el-table-column type="selection"  :selectable="checkSelect1" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column prop="shouyueName" label="受约人" min-width="120" header-align="center" align="center">
                  <template slot-scope="scope">
                  <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)">
                    <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                      <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">...</span></span>
                    </el-tooltip>
                  </div>
                </template>
                </el-table-column>
                <el-table-column prop="shouyueZhiwu" label="受约人职务" min-width="180" header-align="center" align="center">
                  <template slot-scope="scope">
                    <div v-for="item in cutout(scope.row.shouyueZhiwu).slice(0, 2)">
                      <el-tooltip class="item"  :disabled="item.length<8&&cutout(scope.row.shouyueZhiwu).length<3" effect="dark" :content="scope.row.shouyueZhiwu" placement="top-start">
                        <span>{{validatenull(item)?'-':item | ellipsis}}</span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="zhibiaoType" label="指标类别" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="zhibiaoName" label="指标名称" min-width="150" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="weight" label="权重" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="indexContent" label="指标内容" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="unit" label="单位" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="targetValue" label="目标值" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="dataProvider" label="数据提供部门/人" min-width="150" header-align="center" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.tgLx=='2'">{{scope.row.targetUserName}}</span>
                    <span v-else>{{scope.row.dataProvider}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="完成情况" width="150" prop="compleStatus"  header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-input v-if="zhiShow==1&&scope.row.tbzbStatus<1" v-model="scope.row.compleStatus" placeholder="完成情况" @change="saveWorkZbdx(scope.row)"></el-input>
                        <span v-else>{{scope.row.compleStatus}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="zhiShow==2||zhiShow==4||zhiShow==5" label="得分" width="150" prop="tui"  header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-input v-if="zhiShow==2||zhiShow==4" v-model="scope.row.tui" placeholder="得分"></el-input>
                        <span v-else>{{scope.row.tui}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="zhiShow==4||zhiShow==5"  label="其他奖惩" width="150" prop="tui"  header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-input v-if="zhiShow==4||zhiShow==5" v-model="scope.row.tui" placeholder="其他奖惩"></el-input>
                        <span v-else>{{scope.row.tui}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100"  header-align="center" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="primary" plain v-if="scope.row.tbzbStatus<1" @click="confirmTianbao(scope.row.zbId)">提交</el-button>
                  </template>
                </el-table-column>
            </el-table>
      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                       :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import {fetchListdx, delObj,saveWorkZbdx,confirmTianbaodx} from '@/api/hetongrenwu/gongzuorenwushu/workAssignjgtb'
import { validatenull } from "@/util/validate";
export default {
    name:"tianbaoTable-form",
    props:{
        zhiShow:0
    },
    data(){
        return{
          dataList:[],
          dataListLoading:false,
          form:{},
          radio:'1',
          radioTwo:1,
          tableData:[ ],
          pageIndex:1,
          pageSize: 10,
          totalPage: 0,
          gridData:[
            {
              zhiwu: '经理',
              name: '王小虎',
              status: '退回'
            }
          ],
          leveList:[
            {value:"所属单位部门负责人",label:"所属单位部门负责人"}
          ],
          completion:"",
          dialogVisible:false,
          tbDialog:{},
          searchadvanced: true,
          searchheight: '0'
        }
    },
    watch:{
      radio(value){
        if(value){
          this.getDataList();
        }
      }
    },
    filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
      },
    created() {
      this.getDataList()
    },
    methods:{
      selectChange(val){
        this.$emit('tbTableChild',val)
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        fetchListdx(Object.assign({
          type:this.radio,
          fayuename:this.form.fayueName,
          shouyuename:this.form.shouyueName,
          current: this.pageIndex,
          size: this.pageSize,
          workAssignAuditStatus:7,
          contFillStatus:1,
          dingtype:2
        })).then(response => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
      init(data){
       //console.log(data);
        this.form=data;
        this.radio=data.radio;
        this.getDataList()
      },
      saveWorkZbdx(row){
          var params={
            id:row.zbId,
            compleStatus:row.compleStatus
          }
          saveWorkZbdx(params).then(response => {
            this.getDataList()
          })
      },
      confirmTianbao(data){
        confirmTianbaodx(data).then(response => {
          this.$message.closeAll();
          this.$message.success('提交成功')
          this.getDataList();
        })
      },
      //拆分数据
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
      //判空
      validatenull(val){
        return validatenull(val)
      },
      checkSelect1 (row,index) {
        let isChecked = true;
        if (row.tbzbStatus<1 ) { // 判断里面是否存在某个参数
          isChecked = true
        } else {
          isChecked = false
        }
        return isChecked
      },
    }
}
</script>

<style>

</style>
